<!DOCTYPE html>
<html>
<head>
    <style>
        #spacingPair { border-spacing: 10px 20px; }
        #spacingSingle { border-spacing: 10px; }
        #zeroSpacingPair { border-spacing: 0px 0px; }
        #zeroSpacingSingle { border-spacing: 0px; }
    </style>
    <script type="text/javascript">
        function log(msg)
        {
            document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
        }

        function test(id, prop)
        {
            var ob = document.getElementById(id + 'Pair');
            log('getPropertyValue(' + prop + '): ' + document.defaultView.getComputedStyle(ob, null).getPropertyValue(prop));
            ob = document.getElementById(id + 'Single');
            log('getPropertyValue(' + prop + '): ' + document.defaultView.getComputedStyle(ob, null).getPropertyValue(prop));
        }

        function runTests()
        {
            if (window.testRunner)
                testRunner.dumpAsText();

            test('spacing', 'border-spacing');
            
            log('');

            log('Test getting border-spacing of 0.')
            test('zeroSpacing', 'border-spacing');

            log('');

            log('Test getting initial value of the background size.')
            var ob = document.getElementById('spacingInit');
            log('getPropertyValue(border-spacing): ' + document.defaultView.getComputedStyle(ob, null).getPropertyValue('border-spacing'));
        }
    </script>
</head>
<body onload="runTests();">
    <p>Test calling getPropertyValue on computed styles for -webkit-backround-size properties.</p>
    <pre id="console"></pre>

    <div id="spacingPair"></div>
    <div id="spacingSingle"></div>
    <div id="zeroSpacingPair"></div>
    <div id="zeroSpacingSingle"></div>
    <div id="spacingInit"></div>
</body>
</html>
